<template>
  <view class="Insurance_class">
    <text class="Insurance_class_head"> 今日热点</text>
    <navigator
      url="../../pagesD/newsDetail/newsDetail"
      class="Insurance_class_box"
      v-for="item in insurance_c"
      :key="item._id"
    >
      <view class="Insurance_class_box_coment">
        <text class="Insurance_class_box_coment_txt_h">{{ item.content }}</text>
        <view class="Insurance_class_box_coment_txt">
          <text class="Insurance_class_box_coment_txt_1">{{
            item.text_new
          }}</text>
          <text class="Insurance_class_box_coment_txt_2"
            >{{ item.libray }}浏览量</text
          >
        </view>
      </view>
      <view class="Insurance_class_box_img_i">
        <image :src="item.img" class="img" mode=""></image>
      </view>
    </navigator>
  </view>
</template>

<script>
export default {
  data() {
    return {
      insurance_c: [
        {
          _id: 1,
          content: "沪指在节后长期补跌后，近两日持续震荡，尤其是今日内宽幅",
          text_new: "谈钱一分钟",
          libray: 33,
          img: "../../static/img/tupian_shouye_jinriredian.png",
        },
        {
          _id: 2,
          content: "想要提升额度怎么就这么难？这里的小妙招了解一下吧~",
          text_new: "雨点说钱",
          libray: 33,
          img: "../../static/img/tupian_shouye_jinriredian_4.png",
        },
        {
          _id: 3,
          content: "王牌组合，详解固收财富让你不在迷茫",
          text_new: "谈钱一分钟",
          libray: 33,
          img: "../../static/img/tupian_shouye_jinriredian_2.png",
        },
        {
          _id: 4,
          content: "基金怎么买？难道还在听别人吗？这里详细答案告诉你",
          text_new: "雨点说钱",
          libray: 33,
          img: "../../static/img/tupian_shouye_jinriredian_3.png",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.Insurance_class {
  box-sizing: border-box;
  padding: 40rpx;
  padding-top: 0;
  // border-bottom: 1px solid #E5E4E2;
  padding-bottom: 10rpx;

  .Insurance_class_head {
    width: 128rpx;
    height: 44rpx;
    font-size: 32rpx;
    font-weight: normal;
    font-stretch: normal;
    line-height: 44rpx;
    letter-spacing: 0rpx;
    color: #161616;
    margin-bottom: 24rpx;
  }

  .Insurance_class_box {
    display: flex;
    margin-bottom: 40rpx;
    border-bottom: 1px solid #eaeae8;
    justify-content: space-between;
    margin-top: 16rpx;
    margin-bottom: 10rpx;
    .Insurance_class_box_coment {
      vertical-align: bottom;

      .Insurance_class_box_coment_txt_h {
        width: 480rpx;
        height: 88rpx;
        font-size: 32rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 44rpx;
        letter-spacing: 0rpx;
        color: #474747;
        margin-top: 20rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .Insurance_class_box_coment_txt {
        font-size: 20rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 44rpx;
        letter-spacing: 0rpx;
        color: #323232;
        opacity: 0.61;
        display: flex;
        justify-content: space-between;
      }
    }

    .Insurance_class_box_img_i {
      margin-left: 24rpx;

      .img {
        width: 162rpx;
        height: 154rpx;
      }
    }
  }
}
</style>
